<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery3.3.1.js"></script>
</head>
<body>
    
    <ul>我是ul</ul>
    <input type="button" value="添加节点" />
    <script>
        // var ali=document.createElement("li"); JS
        // $("<li></li>"); jq

        // var i=0;
        // $('input').click(function(){
        //     i++;
        //     // $("ul").append($("<li>"+i+"</li>")) 
        //     // $("<li>"+i+"</li>").appendTo($("ul"))
        // })

        // 父级下添加节点
        // append 添加到末尾
        // $(A).append(B) 将b添加到a的末尾
        // appendTo 
        // $(A).appendTo(B) 将a添加到b的末尾


        // prepend 
        // $(A).prepend(B) 将b前置插入到A中
        // prependTo 
        // $(A).prependTo(B) 将a前置插入到B中
        var i=0;
        $('input').click(function(){
            i++;
            // $("ul").prepend($("<li>"+i+"</li>")) 
            $("<li>"+i+"</li>").prependTo($("ul"))
        })
    </script>
</body>
</html>